<template>
  <div class="category-content">
    <div class="category-lists">
      <div class="category__title">
        分类 - <span class="category__amount">{{ total }}</span>
      </div>
      <div>
        <ul class="category-list">
          <li
            v-for="item in list"
            :key="item.categories"
            class="category-list-item"
          >
            <router-link
              class="category-list-link"
              :to="{path:'/categories/'+item.categories}"
            >
              {{ item.categories }}
            </router-link>
            <span class="category-list-count">{{ item.articleCount }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { categoriesList } from '@/api/categories'

export default {
  name: 'Categories',
  components: {},
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 0,
        size: 10
      }
    }
  },
  created() {
    document.title = '分类'
    this.getCategoriesList()
  },
  methods: {
    getCategoriesList() {
      categoriesList(this.listQuery).then(response => {
        if (response.data.code === 20000) {
          this.list = response.data.payload.list
          this.total = response.data.payload.total
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
